<template>
  <component :is="tag" :style="styleProps" class="l-text-component" @click="handleClick">
    {{ text }}
  </component>
</template>

<script lang="ts" >
import { defineComponent } from 'vue';
import useComponentCommon from '../hooks/useComponentCommon'
import { transformToComponentProps, textDefaultProps,textStylePropNames, TextComponentProps } from '../defaultProps';
/**
 * LText组件默认属性
 */
const defaultProps = transformToComponentProps(textDefaultProps);
// console.log(defaultProps, 'defaultProps');
export default defineComponent({
  name: 'l-text',
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    ...defaultProps
  },
  setup (props: Readonly<Partial<TextComponentProps>>) {
    // 重用并且简化
    // 抽离并且获得 styleProps
    const { styleProps, handleClick} = useComponentCommon(props, textStylePropNames)
    return {
       styleProps,
       handleClick
    }
  }
})
</script>

<!-- <template>
  <component :is="props.tag" :style="styleProps" class="l-text-component" @click="handleClick">
    {{ props.text }}
  </component>
</template>

<script lang="ts" setup>
import { defineOptions, computed, defineProps } from 'vue';
import useComponentCommon from '../hooks/useComponentCommon'
import { transformToComponentProps,TextComponentProps, textDefaultProps,textStylePropNames } from '../defaultProps';
/**
 * LText组件默认属性
 */
const defaultProps = transformToComponentProps(textDefaultProps);
// console.log(defaultProps, 'defaultProps');
defineOptions({
  name: 'l-text'
});
const  abc = {
  tag: {
    type: String,
    default: 'div'
  },
  ...defaultProps
}
const props = defineProps({
  tag: {
    type: String,
    default: 'div'
  },
  ...defaultProps
});
console.log(props, 'props');
// const styleProps = computed(() => {
//   return pick(props, ['fontSize', 'color']);
// });
// 重用并且简化
    // 抽离并且获得 styleProps
    const { styleProps, handleClick} = useComponentCommon(props, textStylePropNames)
</script> -->



<style scoped>
h2.l-text-component,
p.l-text-component {
  margin-bottom: 0;
}

button.l-text-component {
  padding: 5px 10px;
  cursor: pointer;
}

.l-text-component {
  position: relative !important;
  box-sizing: border-box;
  white-space: pre-wrap;
}
</style>
